<!DOCTYPE html>
<html>

<head>
	<title>Testman自动化测试平台</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		a {
			text-decoration: none;
			color: #fff;
			opacity: 0.7;
		}

		#all {
			width: 1440px;
			height: 728px;
			background-color: #F0F0F0;
			margin: 10px auto;
		}

		#border-top {
			left: 0px;
			top: 0px;
			height: 80px;
			line-height: 18px;
			background-color: #fff;
			font-size: 14px;
		}

		#border-top_title {
			left: 0px;
			top: 0px;
			height: 80px;
			width: 253px;
			background-color: #002140;
			color: #fff;
			float: left;
		}

		#border-top_title_content {
			font-size: 28px;
			font-weight: bold;
			margin-left: 30px;
			padding-top: 30px;
			color: #fff;
			float: left;
		}

		#border-top_user {
			background-color: #B1B1B1;
			width: 1187px;
			height: 80px;
			float: right;
		}

		#border-top_user_content {
			margin-top: 20px;
			font-size: 32px;
			float: right;
		}

		#user {
			padding-bottom: 30px;
			color: #595959;
		}

		#border-top_des {
			margin-top: 10px;
			width: 1186px;
			height: 40px;
			border-right: 1px solid #F0F0F0;
			background-color: #fff;
			float: right;

		}

		#top-des {
			color: #595959;
		}

		#border-top_descontent {
			margin-top: 8px;
		}

		#left {
			top: 79px;
			width: 253px;
			height: 645px;
			font-size: 20px;
			background-color: #2B2E34;
			float: left;
			display: inline-block;
		}

		#left_word,
		a {
			color: #fff;
			vertical-align: middle;
		}

		#left_word>a>img {
			vertical-align: middle;
		}

		ul li {
			list-style: none;
			line-height: 50px;
			height: 50px;
		}

		#list li {
			width: 253px;
			color: #fff;
			opacity: 0.7;
			vertical-align: middle;
		}

		#list>li:hover {
			background: #23262E;
			display: block;
			opacity: 1;
			vertical-align: middle;
		}

		#listimg {
			margin-right: 20px;
			vertical-align: middle;
		}

		#listimgnone {
			margin-right: 67px;
			vertical-align: middle;
		}

		.sidebar {
			width: 300px;
			font-size: 20px;
			line-height: 45px;
			vertical-align: middle;
		}

		#right {
			position: relative;
			float: right;
			width: 1100px;
			height: 560px;
			margin-top: 20px;
			margin-right: 50px;
			background-color: #fff;
		}

		#right-content {
			font-size: 28px;
			font-weight: bold;
			margin-left: 30px;
			padding-top: 30px;
			color: black;
			float: left;
		}

		#right-button {
			width: 519px;
			height: 100px;
			font-size: 28px;
			font-weight: bold;
			margin-left: 55px;
			padding-top: 30px;
			color: black;
			float: left;
		}

		#search {
			width: 300px;
			height: 35px;
			font-size: 23px;
			margin-left: 10px;
			float: left;
		}

		#button1 {
			color: #fff;
			background-color: #1890FF;
			width: 100px;
			height: 35px;
			font-size: 23px;

		}

		#rightone {
			height: 420px;
			width: 1100;
			margin-top: 1px;
			float: left;
		}

		.num {
			margin-left: 40px;
			margin-top: 0%;
			height: 400px;
			width: 120px;
			float: left;
		}

		.name,
		.url,
		.run {
			margin-top: 0%;
			height: 400px;
			width: 120px;
			float: left;
		}

		.time {
			margin-top: 0%;
			height: 400px;
			width: 200px;
			float: left;
		}

		#xmName {
			height: 35px;
		}

		.runn {
			color: black;
		}

		#detail {
			width: 100px;
			height: 20px;
			color: #1890FF;

		}

		.page {
			margin-left: 500px;
			margin-top: 5px;
			width: 200px;
			float: left;
		}

		#slcPG {
			width: 20px;
		}
	</style>

</head>

<body>
	<div id="all">

		<div id="border-top">
			<div id="border-top_title">
				<h4 id="border-top_title_content">
					<stong>自动化测试平台</stong>
				</h4>
			</div>
			<div id="border-top_user">
				<div id="border-top_user_content">
					<a href="#" id="user" style="margin-left:15px">mjy</a>
					<a href="#" style="margin-left:25px"><img src="./a1.jpg"></a>
					<a href="#" style="margin-left:25px;margin-right:20px"><img src="./a3.jpg"></a>
				</div>
			</div>
		</div>

		<div id="border-top_des">
			<div id="border-top_descontent">
				<a href="#" id="top-des" style="margin-left:15px">报告管理/测试报告</a>
			</div>
		</div>


		<div id="left">
			<div id="left_word">
				<ul id="list">
					<li class="sidebar" style="background:#002140"><a id="aaa" href="index.html"><img id="listimg"
								src="./a2.jpg" />首页</a></li>
					<li class="sidebar" style="background:#001529"><a href=""><img id="listimg"
								src="./a5.jpg" />项目管理</a></li>
					<li class="sidebar" style="background:#101010"><a href=""><img id="listimgnone" />项目</a></li>
					<li class="sidebar" style="background:#001529"><a href=""><img id="listimg"
								src="./a6.jpg" />接口管理</a></li>
					<li class="sidebar" style="background:#101010"><a href=""><img id="listimgnone" />接口模块</a></li>
					<li class="sidebar" style="background:#101010"><a href="testone.html"><img
								id="listimgnone" />接口信息</a></li>
					<li class="sidebar" style="background:#101010"><a href=""><img id="listimgnone" />内置函数</a></li>
					<li class="sidebar" style="background:#001529"><a href=""><img id="listimg"
								src="./a6.jpg" />报告管理</a></li>
					<li class="sidebar" style="background:#1890FF"><a href="reports.html"><img
								id="listimgnone" />测试报告</a></li>
					<li class="sidebar" style="background:#001529"><a href=""><img id="listimg"
								src="./a6.jpg" />定时任务</a></li>
					<li class="sidebar" style="background:#001529"><a href=""><img id="listimg"
								src="./a6.jpg" />关于我们</a></li>
				</ul>
			</div>
		</div>


		<div id="right">
			<div id="right-content">测试报告</div>
			<div id="right-button">
				<div style="float: left;margin-right: 30px;"><input id="search" type="search" onsubmit="searchList" name="firstname" placeholder="搜索用例"></div>
				<div style="float: left;"><a href=""><button id="button1" type="button" onclick="searchList">查询</button></a></div>
				<ul id="list">

				</ul>
			</div>
			<div id="rightone">
				<div class="num">
					<p>id</p>
					<p id="xmName"></p>
					<hr />
					<p>0</p>
					<p id="xmName"></p>
					<hr />
					<p>1</p>
					<p id="xmName"></p>
					<hr />
					<p>2</p>
					<p id="xmName"></p>
					<hr />
					<p>3</p>
					<p id="xmName"></p>
					<hr />
					<p>4</p>
					<p id="xmName"></p>
					<hr />
					<p>5</p>
					<p id="xmName"></p>
				</div>
				<div class="name">
					<p>项目名称</p>
					<p id="xmName"></p>
					<hr />
					<p>青果商城</p>
					<p id="xmName"></p>
					<hr />
					<p>微信</p>
					<p id="xmName"></p>
					<hr />
					<p>mymovie</p>
					<p id="xmName"></p>
					<hr />
					<p>博客网</p>
					<p id="xmName"></p>
					<hr />
					<p>mail</p>
					<p id="xmName"></p>
					<hr />
					<p>phpwind</p>
					<p id="xmName"></p>
				</div>
				<div class="url">
					<p>用例名称</p>
					<p id="xmName"></p>
					<hr />
					<p>登录用例</p>
					<p id="xmName"></p>
					<hr />
					<p>获取项目信息</p>
					<p id="xmName"></p>
					<hr />
					<p>登录用例</p>
					<p id="xmName"></p>
					<hr />
					<p>获取项目信息</p>
					<p id="xmName"></p>
					<hr />
					<p>登录用例</p>
					<p id="xmName"></p>
					<hr />
					<p>获取项目信息</p>
				</div>
				<div class="time">
					<p>运行时间</p>
					<p id="xmName"></p>
					<hr />
					<p>2017-10-31 23:12:00</p>
					<p id="xmName"></p>
					<hr />
					<p>2017-10-31 23:12:00</p>
					<p id="xmName"></p>
					<hr />
					<p>2017-10-31 23:12:00</p>
					<p id="xmName"></p>
					<hr />
					<p>2017-10-31 23:12:00</p>
					<p id="xmName"></p>
					<hr />
					<p>2017-10-31 23:12:00</p>
					<p id="xmName"></p>
					<hr />
					<p>2017-10-31 23:12:00</p>
				</div>
				<div class="run">
					<p class="runn">查看</p>
					<p id="xmName"></p>

					<a href="CaseResult.html"><button id="detail" type="button">报告结果</button></a>
					<p id="xmName"></p>

					<a href="CaseResult.html"><button id="detail" type="button">报告结果</button></a>
					<p id="xmName"></p>

					<a href="CaseResult.html"><button id="detail" type="button">报告结果</button></a>
					<p id="xmName"></p>

					<a href="CaseResult.html"><button id="detail" type="button">报告结果</button></a>
					<p id="xmName"></p>

					<a href="CaseResult.html"><button id="detail" type="button">报告结果</button></a>
					<p id="xmName"></p>

					<a href="CaseResult.html"><button id="detail" type="button">报告结果</button></a>
				</div>
				<div class="page">
					<input type="button" name="" id="slcPG" value="<">
					<input type="button" name="" id="slcPG" value="1" style="background-color: skyblue;
					color: white;">
					<input type="button" name="" id="slcPG" value="2">
					<input type="button" name="" id="slcPG" value="3">
					<input type="button" name="" id="slcPG" value="4">
					<input type="button" name="" id="slcPG" value="5">
					<input type="button" name="" id="slcPG" value=">">
				</div>
			</div>
		</div>

	</div>

	</div>

<script type="text/javascript">
	
	var oIpt=document.getElementById('search');
	var oBtn=document.getElementById('button1');
	var oList = document.getElementById('list');

	var Cases = ["青果商城", "微信", "mymovie", "博客网", "mail", "phpwind"];

	 oBtn.addEventListener('click', function(){
        var keyWord = oTxt.value;
        console.log(CasesList);
        var CasesList = searchByRegExp(keyWord, Cases);
        renderCases(CasesList);
    }, false);

	var cpLock = false;
    $('#txt').on('compositionstart', function () {
        cpLock = true;
        console.log("不搜索")
    });
    $('#txt').on('compositionend', function () {
        cpLock = false;
        console.log("汉字搜索");
        var keyWord = oTxt.value;
        // var fruitList = searchByIndexOf(keyWord,fruits);
        var fruitList = searchByRegExp(keyWord, fruits);
        renderCases(fruitList);
    });
    $('#txt').on('input', function () {
        if (!cpLock) {
            console.log("字母搜索")
            var keyWord = oTxt.value;
            // var fruitList = searchByIndexOf(keyWord,fruits);
            var fruitList = searchByRegExp(keyWord, fruits);
            renderCases(fruitList);
        }
    });

	function renderCases(list){
        if(!(list instanceof Array)){
            return ;
        }
        oList.innerHTML = '';
        var len = list.length;
        var item = null;
        for(var i=0;i<len;i++){
            item = document.createElement('li');
            item.innerHTML = list[i];
            oList.appendChild(item);
        }
    }

	 //模糊查询,利用字符串的indexOf方法
	 function searchByIndexOf(keyWord, list){
        if(!(list instanceof Array)){
            return ;
        }
        var len = list.length;
        var arr = [];
        for(var i=0;i<len;i++){
            //如果字符串中不包含目标字符会返回-1
            if(list[i].indexOf(keyWord)>=0){
                arr.push(list[i]);
            }
        }
        return arr;
    }

	renderCases(cases);
</script>
</body>

</html>